<template>

  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="queryPage.type" class="filter-item" placeholder="模板类型" style="width: 150px" clearable>
        <el-option v-for="item in xmTypes" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>
      <el-select v-model="queryPage.status" class="filter-item" placeholder="状态" style="width: 150px" clearable>
        <el-option v-for="item in ywTypes" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>
      <el-input v-model="queryPage.name" class="filter-item" placeholder="项目名称" style="width: 150px" clearable />

      <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()">
        查询
      </el-button>
    </div>

    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">新增</el-button>

    <el-table v-loading="listLoading" :data="data" :height="tableHeight2" style="width: 100%;margin-top:10px; overflow:auto" border @selection-change="handleSelectionChange">
      <el-table-column type="index" header-align="center" align="center" label="序号" width="60px" />
      <el-table-column header-align="center" align="left" label="操作" width="240px" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.state === '1'" type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button v-if="scope.row.state==='1'" type="danger" size="small" @click="updateStatus(scope, '2', '禁用')">禁用</el-button>
          <el-button v-if="scope.row.state==='2'" type="primary" size="small" @click="updateStatus(scope, '1', '启用')">启用</el-button>
          <el-button v-if="scope.row.defaultData !== '1'" type="primary" size="small" @click="onDefault(scope)">设为默认</el-button>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="模板名称">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="模板类型">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.type,'CDS_TEMPLATE_TYPE') }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="状态">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.state,'YW_BASE_STATUS') }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="创建人">
        <template slot-scope="scope">
          {{ scope.row.createUserName }}
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogAddVisible" append-to-body width="1200px" :show-close="false" :title="'新增模板'" :close-on-click-modal="false">
      <dialog-add v-if="dialogAddVisible" ref="dialogAdd" :visible.sync="dialogAddVisible" />
    </el-dialog>

    <el-dialog :visible.sync="dialogEditVisible" append-to-body width="1200px" :show-close="false" :title="'编辑模板'" :close-on-click-modal="false">
      <dialog-edit v-if="dialogEditVisible" ref="dialogEdit" :proid="code" :visible.sync="dialogEditVisible" />
    </el-dialog>

    <pagination v-show="total>-1" :total="total" :page.sync="queryPage.page" :limit.sync="queryPage.limit" @pagination="loadList" />
  </div>
</template>

<script>
import { getPage, updateState, onDefault } from '@/api/mdTemplate'
import { getDictListByCode } from '@/api/dict'
import { Message, MessageBox } from 'element-ui'
import { tableHeight2 } from '@/utils/tableHeight'
import Pagination from '@/components/Pagination'

import DialogAdd from '../template/add' // eslint-disable-line no-unused-vars
import DialogEdit from '../template/edit' // eslint-disable-line no-unused-vars

export default {
  components: { Pagination, DialogAdd, DialogEdit },
  mixins: [tableHeight2],
  provide() {
    return {
      onLoadList: this.loadList
    }
  },
  data() {
    return {
      listLoading: false,
      queryPage: {
        page: 1,
        limit: 20
      },
      total: 0,
      code: '',
      data: [],
      dialogAddVisible: false,
      dialogEditVisible: false,
      ywTypes: [],
      xmTypes: [],
      multipleSelection: []
    }
  },
  created() {
    this.getDictList('CDS_TEMPLATE_TYPE')
    this.getDictList('YW_BASE_STATUS')
    this.loadList()
  },
  methods: {
    getDictList(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_TEMPLATE_TYPE') {
          this.xmTypes = response.data
        }
        if (code === 'YW_BASE_STATUS') {
          this.ywTypes = response.data
        }
      })
    },
    getDicName(code, flag) {
      var dict = null
      if (flag === 'CDS_TEMPLATE_TYPE') {
        dict = this.xmTypes
      } else if (flag === 'YW_BASE_STATUS') {
        dict = this.ywTypes
      }
      for (var i in dict) {
        if (dict[i].code === code) {
          return dict[i].name
        }
      }
    },
    search() { // 查询
      this.loadList()
    },
    loadList() { // 加载列表
      this.data = []
      this.listLoading = true

      getPage(this.queryPage).then(response => {
        const { data } = response

        this.data = data.records
        this.total = parseInt(data.total)
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    handleAdd() {
      this.dialogAddVisible = true
      this.$nextTick(() => {
        this.$refs.dialogAdd
      })
    },
    handleEdit(scope) {
      this.dialogEditVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.dialogEdit
        this.$refs.dialogEdit.getDetailed()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i])
      }
    },
    updateStatus(scope, flag, type) {
      MessageBox.confirm('确认' + type, '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: type + '中...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.1)'
        })

        updateState({ code: scope.row.id, status: flag }).then(response => {
          Message({
            message: type + '成功',
            type: 'success',
            duration: 5 * 1000
          })
          // 重新加载表格
          this.loadList()
          loading.close()
        }).catch(response => {
          this.loadList()
          loading.close()
        })
      })
    },
    onDefault(scope) {
      MessageBox.confirm('确定设置默认', '确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '操作中...',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.1)'
        })

        onDefault({ code: scope.row.id }).then(response => {
          Message({
            message: '操作成功',
            type: 'success',
            duration: 5 * 1000
          })
          // 重新加载表格
          this.loadList()
          loading.close()
        }).catch(response => {
          this.loadList()
          loading.close()
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.app-container{
  padding:10px 20px;
}
.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
  .date-filter-item{
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
.pagination-container {
  margin-top: 0 !important;
  padding: 10px 16px !important;
}
</style>
